<style>
  @import '../../assets/css/order.css';
</style>
<template>
	<div class="m-content">
		<AppHeader></AppHeader>
		<div class="warp">
			<div class="m-middle">
				<div class="m-order-tab f-cb">
					<ul>
						<li class="m-act">服务订单</li>
					</ul>
				</div>
			</div>
			<div class="orderdetails-title">
				<p><span class="triangle"></span>{{ list.id }}订单详情</p>
			</div>
			<div class="m-search">
				<div class="m-search-top f-cb">
					<div class="form-glop">
						<label>姓名:</label><input type="text"  v-model="inputName"　disabled placeholder="姓名" />
					</div>
					<div class="form-glop">
						<label>电话:</label><input type="text" v-model="inputPhone" disabled placeholder="电话" />
					</div>
					<div class="form-glop">
						<label>高考分数:</label><input type="text" v-model="inputFraction" disabled placeholder="高考分数" />
					</div>
					<div class="form-glop">
						<label>所在省份:</label><input type="text" v-model="inputProvince" disabled placeholder="所在省份" />
					</div>
					<div class="form-glop">
						<label>文理科:</label><input type="text" v-model="inputProject" disabled placeholder="文理科" />
					</div>
					<div class="form-glop">
						<label>意向省份:</label><input type="text"  v-model="intentionalProvince" disabled placeholder="意向省份"/>
					</div>
					<div class="form-glop f-fr">
						<label>意向专业:</label><input type="text"  v-model="majorMin" disabled placeholder="意向专业" />
					</div>										
				</div>					
				<div class="m-search-top f-cb">
					<div class="form-glop" v-if= "inputPhysics !==null && inputPhysics !==''">
						<label>物理:</label>
						<input type="text" v-model="inputPhysics" placeholder="物理" disabled />
					</div>				
					<div class="form-glop"  v-if= "inputChemical !==null && inputChemical !==''">
						<label>化学:</label>
						<input type="text" v-model="inputChemical" placeholder="化学" disabled />
					</div>
					<div class="form-glop"  v-if= "inputBiological !==null && inputBiological !==''">
						<label>生物:</label>
						<input type="text"  v-model="inputBiological" placeholder="生物" disabled />
					</div>
					<div class="form-glop" v-if= "inputGeographic !==null && inputGeographic !==''">
						<label>地理:</label>
						<input type="text"  v-model="inputGeographic" placeholder="地理" disabled />
					</div>
					<div class="form-glop" v-if= "inputPolitical !==null && inputPolitical !==''">
						<label>政治:</label>
						<input type="text"  v-model="inputPolitical" placeholder="政治" disabled />
					</div>
					<div class="form-glop" v-if= "inputHistory !==null && inputHistory !==''">
						<label>历史:</label>
						<input type="text"  v-model="inputHistory" placeholder="历史" disabled />
					</div>
					<div class="form-glop" v-if= "technology !==null && technology !==''">
						<label>技术:</label>
						<input type="text"  v-model="technology" placeholder="技术" disabled />
					</div>
					<div class="form-glop">
						<label>位次:</label>
						<input type="text"  v-model="weici" placeholder="位次" disabled />
					</div>					
				</div>				
			</div>
			<div class="m-middle">
				<div class="m-middle-ad"></div>										
				<div class="m-order-tab f-cb">
					<ul>
						<li v-bind:class="{'m-act':0==index}" @click="show(0)">推荐类别：冲</li>
						<li v-bind:class="{'m-act':1==index}" @click="show(1)">推荐类别：稳</li>
						<li v-bind:class="{'m-act':2==index}" @click="show(2)">推荐类别：保</li>
					</ul>
				</div>
				<div class="table-content f-cb">
					<table class="table-left">
						<tr>
							<th>操作</th>
							<th>学校</th>
							<th>省份</th>
							<th>专业</th>
						</tr>
						<tbody v-show="arr[0]">
							<tr v-for="(list,index) in list" v-if="list.recommendedLevel == '0'">
								<td style="width:8%">{{ list.provinces }}</td>
								<td style="width:12%">{{ list.school }}</td>
								<td>{{ list.professional }}</td>
							</tr>
						</tbody>
						<tbody v-show="arr[1]">
							<tr v-for="(list,index) in list" v-if="list.recommendedLevel == '1'">
								<td style="width:8%">{{ list.provinces }}</td>
								<td style="width:12%">{{ list.school }}</td>
								<td>{{ list.professional }}</td>
							</tr>
						</tbody>
						<tbody v-show="arr[2]">
							<tr v-for="(list,index) in list" v-if="list.recommendedLevel == '2'">
								<td style="width:8%">{{ list.provinces }}</td>
								<td style="width:12%">{{ list.school }}</td>
								<td>{{ list.professional }}</td>
							</tr>
						</tbody>												
					</table>
				</div>
				<div class="m-replay">
					<p class="m-replay-title" >专家评价意见</p>
					<p><textarea rows="7" cols="30" v-model="content"></textarea></p>
				</div>
				<div class="f-cb" v-if="select==2">
					<div class="m-btn m-color"  @click="approved(1)">审核通过</div>
					<div class="m-btn m-color" @click="approved(2)" >驳回</div>
				</div>							
			</div>			
		</div>	
		<Footer></Footer>		
	</div>
</template>
<script>
	import AppHeader from '@/components/Header';
	import Footer from '@/components/Footer';
	export default {
		name: 'ucenter',
		components: {
		AppHeader,
		Footer, 
	},
	data() {
		return {
			options: [],
			value5: [],
			value1: [],
			list:[],
			restaurants: [],
			state2: '',
			inputName:'',
			inputPhone:'',
			inputProvince:'',
			inputFraction:'',
			inputProject:'',
			inputPhysics:'',
			inputChemical:'',
			inputBiological:'',
			inputGeographic:'',
			inputPolitical:'',
			inputHistory:'',
			intentionalProvince:'',
			majorMin:'',
			tablelistc: [],
			tablelistw: [],
			tablelistb: [],
			arr:[true,false,false],
			index:'0',
			technology:'',
			checkedNames:[],
			checkedNames2:[],
			checkedNames3:[],
			tablelist:[],
			select:'',
			content:'',	
			weici:'',
		}
	},
	created(){
		var that = this;
		var serviceId = that.$route.query.id;
		var selectId = that.$route.query.selected;
		that.select = selectId;
		that.axios.get('/yan-web/order/service/record',{params:{'serviceId':serviceId,'selectId':selectId,'pageSize':'2000'}},{
		    headers: {
		          'Content-type': 'application/json;charset=UTF-8'
		    }
		})
		.then(function (response) {
			if(response.data.status){
				that.list =response.data.model.report.rows;
				that.list2 =response.data.model.user;				
				that.inputName = response.data.model.user.name;
				that.inputPhone = response.data.model.user.phone;
				that.inputProvince = response.data.model.user.inProvince;
				that.inputFraction = response.data.model.user.fraction;
				that.inputProject = response.data.model.user.project;
				that.inputPhysics = response.data.model.user.physics;
				that.inputChemical = response.data.model.user.chemistry;
				that.inputBiological = response.data.model.user.biology;
				that.inputGeographic = response.data.model.user.geography;
				that.inputPolitical = response.data.model.user.politics;
				that.technology = response.data.model.user.technology;
				that.inputHistory = response.data.model.user.history;
				that.intentionalProvince =  response.data.model.user.intentionalProvince;
				that.majorMin = response.data.model.user.majorMin;
				that.weici = response.data.model.weici;
				that.content = response.data.model.user.expertAdvice;
			}
		})				
	},
	methods:{
		querySearch(queryString, cb) {
			var restaurants = this.restaurants;
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			cb(results);
		},
		createFilter(queryString) {
			return (restaurant) => {
			  return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			};
		},
		show:function(num){
			this.arr = [false,false,false];
			this.index = num;
			this.arr[num] = true;
        },				
		search:function(){
			var that = this;
			if(that.list.project=="文科"){
				var project = '1';
			}else{
				var project = '2';
			}			
			var param = {'fraction':that.inputFraction,'provinceId':that.list.provinceId,'project':project};
			that.axios.get('/yan-web/query/old',{params:param},{
			    headers: {
			          'Content-type': 'application/json;charset=UTF-8'
			    }
			})
			.then(function(response){
				if(response.data.status){
					that.tablelistc = response.data.model.chong;
					that.tablelistw = response.data.model.wen;
					that.tablelistb = response.data.model.bao;
				}
			})				
		},
		approved:function(index){
			var that = this;
			var status = index;
			var data = new FormData();
        		data.append('userId', that.list2.userId);
        		data.append('expertAdvice', that.content);
        		data.append('status', status);
        		data.append('orderlistId', that.list2.id);
        		data.append('outTradeNo', that.list2.outTradeNo);
			that.axios.post('/yan-web/order/review',data,{
			    headers: {
			          'Content-Type': 'multipart/form-data'
			    }
			})
			.then(function(response){
				if(response.data.status){
					alert('提交成功');
				}
			})			
		},	
	}, 
}
</script>